<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox">
    <div  class="message">
        测试内容
    </div>
    <p></p>
    <button>设置</button>
    <button>获取</button>
    <button>删除</button>

    <script>
        var divDom = document.querySelector('div');
        // 形式 为dom对象.属性名称 直接调用表示获取 如果赋值 表示设置
        document.querySelectorAll('button')[0].onclick = function(){
            // 对于CheckBox 或者radio标签
            document.querySelector('input').checked = true;
            divDom.id = 'divId';
            // dom对象调用属性名称的方式 只能控制到标签上自带的属性 自定义属性方式无效
            // divDom.dataIndex = 1;
            // 设置p标签的class值 由于class是关键字 所以对象调用属性时使用的名称是className
            document.querySelector('p').className ='cl'
        }
        document.querySelectorAll('button')[1].onclick = function(){
           console.log(divDom.id)
        }
        document.querySelectorAll('button')[2].onclick = function(){
            document.querySelector('input').checked = false;
            // 没有提供 删除属性就可以完成对标签属性的控制
            divDom.id = '';
        }
        </script>
</body>
</html>